<!--
文件名: src/views/dashboard/index.vue
功能: 数据总览仪表盘 (布局优化版)
描述: 将5个核心指标放在一行展示，快捷入口单独占一行。
-->
<template>
  <div class="dashboard-container">
    <!-- 1. 欢迎区 -->
    <el-card shadow="never" class="welcome-card">
      <div class="welcome-content">
        <img src="@/assets/images/welcome.svg" alt="Welcome" class="welcome-img" />
        <div class="welcome-text">
          <h2>欢迎回来, {{ username }}!</h2>
          <p>开始新的一天吧，祝您工作顺利。</p>
        </div>
      </div>
    </el-card>

    <!-- 2. 核心指标区 (优化：改为5列) -->
    <div class="stats-grid">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>
              <el-icon><Monitor /></el-icon> 设备总数
            </span>
          </div>
        </template>
        <div class="stat-number">{{ stats.deviceCount }}</div>
      </el-card>

      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>
              <el-icon><Clock /></el-icon> 进行中的预约
            </span>
          </div>
        </template>
        <div class="stat-number">{{ stats.ongoingReservations }}</div>
      </el-card>

      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>
              <el-icon><Calendar /></el-icon> 今日新增预约
            </span>
          </div>
        </template>
        <div class="stat-number">{{ stats.todayReservations }}</div>
      </el-card>

      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>
              <el-icon><Finished /></el-icon> 今日完成记录
            </span>
          </div>
        </template>
        <div class="stat-number">{{ stats.todayUsageRecords }}</div>
      </el-card>

      <!-- 新增的卡片：管理员总数 -->
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>
              <el-icon><UserFilled /></el-icon> 管理员总数
            </span>
          </div>
        </template>
        <div class="stat-number">{{ stats.adminCount }}</div>
      </el-card>
    </div>

    <!-- 3. 快捷入口 (优化：单独一行) -->
    <el-card class="quick-access-card">
      <template #header>
        <div class="card-header">
          <span>快捷入口</span>
        </div>
      </template>
      <div class="quick-access">
        <el-button type="primary" @click="goTo('/device/list')">
          <el-icon><Plus /></el-icon> 新增设备
        </el-button>
        <el-button type="success" @click="goTo('/order/reservation')">
          <el-icon><Tickets /></el-icon> 查看预约
        </el-button>
        <el-button type="warning" @click="goTo('/system/content')">
          <el-icon><EditPen /></el-icon> 内容管理
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// --- script 部分完全不变 ---
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import {
  getDeviceListApi,
  getReservationListApi,
  getUsageRecordListApi,
  getAdminListApi,
} from '@/api'
import {
  Monitor,
  Clock,
  Calendar,
  Finished,
  UserFilled,
  Plus,
  Tickets,
  EditPen,
} from '@element-plus/icons-vue'

const userStore = useUserStore()
const { username } = storeToRefs(userStore)

const router = useRouter()
const goTo = (path: string) => {
  router.push(path)
}

const stats = reactive({
  deviceCount: 0,
  ongoingReservations: 0,
  todayReservations: 0,
  todayUsageRecords: 0,
  adminCount: 0,
})

const getTodayDateString = (): string => {
  const today = new Date()
  const year = today.getFullYear()
  const month = (today.getMonth() + 1).toString().padStart(2, '0')
  const day = today.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day}`
}

const fetchDashboardData = async () => {
  try {
    const today = getTodayDateString()
    const [deviceRes, ongoingRes, todayRes, usageRes, adminRes] = await Promise.all([
      getDeviceListApi({ page: 1, size: 1 }),
      getReservationListApi({ status: 'ongoing', page: 1, size: 1 }),
      getReservationListApi({ start_date: today, end_date: today, page: 1, size: 1 }),
      getUsageRecordListApi({ start_date: today, end_date: today, page: 1, size: 1 }),
      getAdminListApi(),
    ])

    stats.deviceCount = deviceRes.total
    stats.ongoingReservations = ongoingRes.total
    stats.todayReservations = todayRes.total
    stats.todayUsageRecords = usageRes.total
    stats.adminCount = adminRes.length
  } catch (error) {
    console.error('加载仪表盘数据失败:', error)
  }
}

import { onMounted } from 'vue'
onMounted(() => {
  fetchDashboardData()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-content {
  display: flex;
  align-items: center;
}

.welcome-img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.welcome-text h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.welcome-text p {
  margin: 0;
  color: #666;
}

/* --- 样式核心改动 --- */
.stats-grid {
  display: grid;
  /* 1. 将网格从4列改为5列 */
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.card-header .el-icon {
  margin-right: 8px;
  vertical-align: middle;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
}

/* 2. 为快捷入口卡片添加独立的样式 */
.quick-access-card {
  width: 100%;
}

.quick-access {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 10px 0;
}
</style>
